<template>
	<view class="press">
		<view class="card">
			<view class="title">对服务满意度：</view>
			<view class="image">
				<image v-for="(item,index) in service_score" :key="index" src="../static/image/star.png" mode=""></image>
				{{ service_score >= 4 ? '好' : '一般' }}
			</view>
			<view class="title">评价标签：</view>
			<view class="type">
				<text v-for="(item,index) in name" :key="index">{{ item }}</text>
			</view>
			<view class="title">评价内容：</view>
			<view class="p">
				{{ content }}
			</view>
		</view>
		
		<view class="btn" v-if="showBtn" @click="show = true">
			删除评价
		</view>
		
		<u-modal :show="show" title="提示" :showCancelButton="true" @cancel="show = false" @confirm="confirm">
			<view class="slot-content">
					<rich-text nodes="是否确认删除此评论？"></rich-text>
				</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show: false,
				content: '',
				name: [],
				service_score: 0,
				order_id: '',
				showBtn: false
			}
		},
		onLoad(){
			let pressInfo = uni.getStorageSync('pressInfo');
			for( let i in pressInfo ){
				this[i] = pressInfo[i];
			}
			// 获取当前用户信息
			this.$http.post("api/user/userInfo").then((res) => {
				if( res.id === pressInfo.user_id ){
					this.showBtn = true;
				}
			})
		},
		methods:{
			confirm(){
				this.$http.post('api/order/commentDelete', {
					order_id: this.order_id
				}).then(res =>{
					uni.showToast({
						icon:'none',
						title:'删除成功'
					})
					uni.$emit('updataDel',{
						order_id: this.order_id
					})
					setTimeout(() =>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.press{
		padding: 20rpx 30rpx;
		.card{
			padding: 30rpx 30rpx 300rpx;
			background-color: white;
			border-radius: 28rpx;
			.title{
				color: #333333;
				font-size: 28rpx;
			}
			.image{
				display: flex;
				align-items: center;
				padding: 20rpx 0 28rpx;
				color: #FF6100;
				font-size: 28rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 28rpx;
				}
			}
			.type{
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 30rpx;
				text{
					min-width: 106rpx;
					height: 66rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					padding: 0 20rpx;
					border: 2rpx solid #EDEDED;
					margin-top: 18rpx;
					margin-right: 14rpx;
					color: #333333;
					font-size: 26rpx;
				}
			}
			.p{
				color: #333333;
				font-size: 28rpx;
				line-height: 40rpx;
				padding-top: 21rpx; 
			}
		}
		.btn{
			height: 86rpx;
			border: 2rpx solid #333333;
			margin: 92rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333333;
			font-size: 36rpx;
			font-weight: 500;
			border-radius: 20rpx;
			box-sizing: border-box;
		}
	}
</style>